<template>
  <div class="sign">
    <div class="container">
      <div class="box">
        <h3>登录</h3>
        <p>请输入用户名和密码</p>
        <input type="text" placeholder="Username" autofocus @input="diyige" v-model="uname">
        <input type="password" placeholder="password" @input="dierge" v-model="password">
        <div><input type="checkbox" @click="gouxvan"><span>记住密码</span></div>
        <button @click="zhuce">注册</button>
        <button @click="sign">登录</button>
        <!-- {{userInfo}} -->
      </div>
    </div>
  </div>
</template>

<script>
  //导入我们之前写的接口
  import { getUserInfo } from '@/axios/api'
  import axios from 'axios'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        uname: '',
        password: '',
        userInfo: ''
      }
    },

    methods: {
      async sign() {
        let input = document.querySelectorAll('input')
        // let butt = document.querySelector('button')
        if (input[0].value && input[1].value) {

          let res = await getUserInfo({ name: this.uname })
          console.log(res, '/api', '获取的用户信息')
          this.userInfo = res.data

          if (input[0].value == this.userInfo.name && input[1].value == this.userInfo.password) {
            // location.assign('index.html')
            this.$router.push('/system', () => { }, () => { })
          } else {
            alert('请输入正确的用户名和密码')
          }
        } else if (input[0].value && !input[1].value) {
          alert('请输入密码')
          input[1].focus()
        } else {
          alert('请输入用户名')
          input[0].focus()
        }

      },
      async zhuce() {
        var name = this.uname;
        var pwd = this.password;
        axios.post('http://localhost:3000/insertUser', {
          name: name,
          pwd: pwd
        }, {}).then((response) => {
          console.log(response);
        })


        // axios.get('http://localhost:3000/getUser').then(
        //   (response) => {
        //     console.log('返回的数据', response.data)
        //   },
        //   (error) => {
        //     console.log('数据请求失败', error.message)
        //   }
        // )

      },
      gouxvan() {
        let input = document.querySelectorAll('input')
        if (input[2].checked) {
          localStorage.setItem('remember', true)
          localStorage.setItem('uid', input[0].value)
          localStorage.setItem('pass', input[1].value)
        } else {
          localStorage.removeItem('remember')
          localStorage.removeItem('uid')
          localStorage.removeItem('pass')
        }
      },
      diyige() {
        let input = document.querySelectorAll('input')
        if (input[2].checked) {
          localStorage.setItem('uid', input[0].value)
        }
      },
      dierge() {
        let input = document.querySelectorAll('input')
        if (input[2].checked) {
          localStorage.setItem('pass', input[1].value)
        }
      }
    },
    mounted() {
      let input = document.querySelectorAll('input')
      //给记住密码添加交互效果
      input[2].checked = localStorage.getItem('remember')
      if (input[2].checked) {
        input[0].value = localStorage.getItem('uid')
        input[1].value = localStorage.getItem('pass')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sign {
    box-sizing: border-box;
    /* width: 1255px;*/
    height: 696px;
    width: 100%;
    /* height: 100%; */
    padding-top: 190px;
    /* background-color: #c59393; */
    background-image: url(../assets/imgs/bg.webp);
    background-repeat: no-repeat;
    background-size: 1280px 730px;
  }

  img {
    width: 200px;
    position: fixed;
    top: 120px;
    left: 50%;
    transform: translate(-50%);
  }

  .container {
    width: 486px;
    height: 300px;
    margin: 0px auto;
    background-color: #fff;
    background-image: url(../assets/imgs/bg.png);
    background-repeat: no-repeat;
    background-size: 486px 300px;
    box-shadow: 0px 0px 30px #e0e0e0;
    border-radius: 20px;
  }

  .container .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    float: right;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .container .box h3 {
    width: 200px;
    height: 20px;
    margin: 0px;
  }

  .container .box p {
    width: 200px;
    margin: 5px 0px;
    font-size: 14px;
    color: #6d6d6d;
  }

  input:nth-child(3) {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 200px;
    height: 30px;
    background-color: #fff;
    border: 0px solid #fff;
    border-bottom: 1px solid #f0b444;
    outline: none;
  }

  input:nth-child(4) {
    width: 200px;
    height: 30px;
    background-color: #fff;
    border: 0px solid #fff;
    border-bottom: 1px solid #f0b444;
    outline: none;
  }

  .box div {
    margin-top: 20px;
    width: 200px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }

  .box div input {
    width: 15px;
    height: 15px;
    margin-left: 0px;
    vertical-align: middle;
  }

  .box div span {
    display: inline-block;
    vertical-align: middle;
  }

  button {
    margin-top: 15px;
    width: 200px;
    height: 27px;
    background-color: #f0a746;
    border: 1px solid #eaeaea;
  }
</style>